<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" @submit.native.prevent>
      <el-form-item label="关键字" prop="search">
        <el-input v-model="queryParams.search" placeholder="UID、奖品名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="发货状态" prop="sendStatus">
        <el-select v-model="queryParams.sendStatus" placeholder="发货状态" clearable style="width: 240px">
          <el-option v-for="dict in pickGoodesList" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="奖品类型" prop="type">
        <el-select v-model="queryParams.type" placeholder="奖品类型" clearable style="width: 240px">
          <el-option v-for="dict in typeList" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="提货时间">
        <el-date-picker v-model="pickDateRange" style="width: 220px" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
      <!-- pickupTime -->

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-download" size="mini" @click="exportExcel" v-hasPermi="['prize:order:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :height="tableHeight" v-loading="loading" @row-click="rowClick" @sort-change="changeTableSort" :data="preList" stripe border>
      <el-table-column label="序号" type="index" align="center" width="60" />
      <el-table-column label="创建日期" prop="createTime" align="center" width="180" :sortable="'custom'" />
      <el-table-column label="UID" prop="userId" align="center" :sortable="'custom'" />
      <el-table-column label="用户手机号" prop="userPhone" align="center" width="120" />
      <el-table-column label="用户昵称" prop="userName" align="center" width="120" />
      <el-table-column label="奖品名称" prop="goodsName" align="center" width="120" :sortable="'custom'" />
      <el-table-column label="奖品类型" prop="type" align="center" width="120" :sortable="'custom'">
        <template slot-scope="scope">
          {{scope.row.type ?"实物奖品":"虚拟奖品"}}
        </template>
      </el-table-column>
      <el-table-column label="发货状态" prop="sendState" align="center" width="120" :sortable="'custom'">
        <template slot-scope="scope">
          {{getLabel(prizePickGoodesEnum,scope.row.sendState)}}
        </template>
      </el-table-column>
      <el-table-column label="发货电话" prop="pickUpPhone" align="center" width="120" />
      <el-table-column label="发货姓名" prop="pickUpName" align="center" />
      <el-table-column label="发货地址" prop="pickUpAddress" width="220" />
      <el-table-column label="提货时间" prop="pickupTime" align="center" width="180" :sortable="'custom'" />
      <el-table-column label="快递单号" prop="trackingNumber" align="center" width="160">
        <template slot-scope="scope">
          <span v-if="scope.row.sendState  ==4">自提</span>
          <span v-else class="pointer">{{selectDictLabel(logistcsType,scope.row.trackingType)}}{{scope.row.trackingNumber?'-'+scope.row.trackingNumber:'' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="120">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['prize:address:edit']">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <div v-if="open">
      <Z-Dialog :title="title" :visible.sync="open" @confirm="submitForm">
        <form-view :logistcsType="logistcsType" :form="form" ref="form" :typeList="typeList" :prizePickGoodesEnum="prizePickGoodesEnum"></form-view>
      </Z-Dialog>
    </div>

    <div v-if="logisticsShow">
      <Z-Dialog :title="title" :visible.sync="logisticsShow" :isShowConfirm="false">
        <logistics :logistics="logistics"> </logistics>
      </Z-Dialog>
    </div>

  </div>
</template>

<script>
import { listOrderPrize, editOrderPrize } from "@/api/order/order.js";
import { excelExportApi } from '@/api/filer'
import { prizePickGoodesEnum } from '@/common/enums'
import { getLabelByValue } from "@/common/common"
import formView from "./formView.vue";
import Logistics from "@/components/Logistics";
import { mapState } from 'vuex'

export default {
  name: "Win", //中奖管理
  dicts: ["order_status"],
  components: { formView, Logistics },

  data() {
    return {
      prizePickGoodesEnum,
      // 列表数据
      preList: [],
      dialogVisible: false,
      logisticsShow: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      logistics: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: this.global.pageSize,
      },
      pageNum: 1,
      // 表单参数
      form: {},

      // 提货日期
      pickDateRange: [],

      typeList: [{ label: '全部', value: null }, { label: '虚拟奖品', value: 0 }, { label: '实物奖品', value: 1 }],

    };
  },
  computed: {
    tableHeight() {
      return 'calc(100vh - 280px)'
    },
    ...mapState({
      logistcsType: state => state.logistics.list
    }),
    //提货状态
    pickGoodesList() {
      let typeDictArray = JSON.parse(JSON.stringify(this.prizePickGoodesEnum));
      typeDictArray.unshift({ label: "全部", value: undefined });
      return typeDictArray;
    },
  },
  watch: {
    "queryParams": {
      deep: true,
      handler: function (newV, oldV) {

        if (this.pageNum == newV.pageNum) {
          this.handleQuery();
        } else {
          this.pageNum = newV.pageNum;
        }
      },
    },

    pickDateRange(newV, oldV) {
      if (newV) {
        if (newV.length >= 2) {
          this.queryParams.pickUpTimeStart = String(newV[0]);
          this.queryParams.pickUpTimeEnd = String(newV[1]);
        }
      } else {
        this.queryParams.pickUpTimeStart = undefined;
        this.queryParams.pickUpTimeEnd = undefined;
      }
      this.getList();
    }

  },
  created() {
    this.getList();
    this.$store.dispatch('GetListLogisticsType')
  },
  methods: {
    getList() {
      this.loading = true;
      listOrderPrize(this.queryParams).then((response) => {
        if (response.code == 200) {
          this.preList = response.data;

          this.total = response.total;
        }
        this.loading = false;
      });
    },

    changeTableSort(column) {
      this.queryParams.orderBy = column.prop;
      this.queryParams.isAsc = column.order == 'descending' ? 0 : 1; //ascending == 升序 descending == 降序  0 倒,1正
      this.getList();
    },

    // 单元格点击
    rowClick(row, column) {

      if (column.label == '快递单号' && row.trackingNumber) {
        this.title = "物流信息";
        this.logistics = row;
        this.logisticsShow = true;
      }
    },

    // 取消按钮
    cancel() {
      this.open = false;
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 查看按钮操作 */
    handleUpdate(row) {
      this.open = true;
      this.form = JSON.parse(JSON.stringify(row));
    },

    /**导出 */
    exportExcel() {
      this.queryParams.beanName = 'OrderPrizeExport',
        this.queryParams.fileName = '奖品订单',
        this.$alert('需要导出 "' + this.total + '" 条数据,是否确认导出', '提示', {
          confirmButtonText: '确定',
        }).then(() => {
          excelExportApi(this.queryParams, '/oms');
        });
    },

    getLabel(arr, value) {
      return getLabelByValue(arr, value)
    },

    submitForm: function () {
      this.form = this.$refs.form.form;
      this.form.pickPpAddress = this.form.pickUpAddress;
      this.$refs.form.$refs.form.validate((valid) => {
        if (valid) {
          editOrderPrize(this.form).then((response) => {
            this.$modal.msgSuccess("编辑成功");

          }).finally(res => {
            this.open = false;
            this.loading = true;
            setTimeout(() => {
              this.getList();
            }, 1000);
          });;
        }
      });
    },
  },
};
</script>
<style scoped>
.pointer {
  cursor: pointer;
  color: cornflowerblue;
}
</style>
